@import '~antd/lib/style/themes/default.less';

@pro-header-hover-bg: rgba(0, 0, 0, 0.025);

.head {
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  transition: background 0.3s, width 0.2s;

  .left {
    float   : left;
    height  : 100%;
    overflow: hidden;

    .trigger {
      font-size  : 18px;
      line-height: 64px;
      padding    : 0 24px;
      cursor     : pointer;
      transition : color .3s;
    }

    .trigger:hover {
      color: #1890ff;
    }

    .bread {
      display    : inline-block;
      line-height: 64px;
      padding    : 0 12px;
      transition : color .3s;
    }
  }

  .right {
    float   : right;
    height  : 100%;
    overflow: hidden;

    .action {
      display   : inline-block;
      height    : 100%;
      padding   : 0 12px;
      cursor    : pointer;
      transition: all 0.3s;

      >i {
        color         : @text-color;
        vertical-align: middle;
      }

      >i:hover {
        color: #1890ff;
      }

      &:hover {
        background: @pro-header-hover-bg;
      }

      &:global(.opened) {
        background: @pro-header-hover-bg;
      }
    }

    .account {
      .avatar {
        margin        :~'calc((@{layout-header-height} - 24px) / 2)'0;
        margin-right  : 8px;
        color         : @primary-color;
        vertical-align: top;
        background    : rgba(255, 255, 255, 0.85);
      }
    }
  }
}